<template>
    <q-view layout="vbox" id="scrollView">
        <q-label :text="`统计文件/目录：<font style='color:gray'>${this.fileName}</font>`" />
        <q-label :text="`总耗时：<font style='color:gray'>${this.costTime}</font> S`" />
        <q-view layout="hbox" id="titleContainer">
            <q-label id="titleLabel" :text="`文件类型`"></q-label>
            <q-label id="titleLabel" :text="`文件数 <a href='count' style='color:#3aad4f;font-size:18px;'>⥮</a>`" @linkActivated="linkActivated($event,'fileCount')"></q-label>
            <q-label id="titleLabel" :text="`行数 <a href='count' style='color:#3aad4f;font-size:18px;'>⥮</a>`" @linkActivated="linkActivated($event,'count')"></q-label>
            <q-label id="titleLabel" :text="`空行行数 <a href='emptyCount' style='color:#3aad4f;font-size:18px;'>⥮</a>`" @linkActivated="linkActivated($event,'emptyCount')"></q-label>
            <q-label id="titleLabel" :text="`注释行数 <a href='annotationCount' style='color:#3aad4f;font-size:18px;'>⥮</a>`" @linkActivated="linkActivated($event,'annotationCount')"></q-label>
            <q-label id="titleLabel" :text="`净代码行数 <a href='codeCount' style='color:#3aad4f;font-size:18px;'>⥮</a>`" @linkActivated="linkActivated($event,'codeCount')"></q-label>
        </q-view>
        <q-list-view id="countList" @itemDoubleClicked="on_countList_itemDoubleClicked" @currentItemChanged="on_countList_currentItemChanged">
            <q-list-item layout="hbox" v-for="(target, index) in displayList" id="listItem">
                <q-label id="fieldLabel" :text="`${target.ext}`"></q-label>
                <q-label id="fieldLabel" :text="`${target.fileCount}`"></q-label>
                <q-label id="fieldLabel" :text="`${target.count}`"></q-label>
                <q-label id="fieldLabel" :text="`${target.emptyCount}`"></q-label>
                <q-label id="fieldLabel" :text="`${target.annotationCount}`"></q-label>
                <q-label id="fieldLabel" :text="`${target.codeCount}`"></q-label>
            </q-list-item>
        </q-list-view>
        <q-view layout="hbox" id="titleContainer">
            <q-label id="countLabel" text="总计："></q-label>
            <q-label id="countLabel" :text="`${all.fileCount}（个）`"></q-label>
            <q-label id="countLabel" :text="`${all.count}（行）`"></q-label>
            <q-label id="countLabel" :text="`${all.emptyCount}（行）`"></q-label>
            <q-label id="countLabel" :text="`${all.annotationCount}（行）`"></q-label>
            <q-label id="countLabel" :text="`${all.codeCount}（行）`"></q-label>
        </q-view>
        <q-view layout="vbox" :visible="fileDetails.length">
            <q-view layout="hbox" id="titleContainer">
                <q-label :text="`文件详情：`"></q-label>
                <q-label id="titleLabel" :text="`行数  <font style='color:gray'>${currentFileInfo? currentFileInfo.count : '0'}</font>`"></q-label>
                <q-label id="titleLabel" :text="`空行行数  <font style='color:gray'>${currentFileInfo? currentFileInfo.emptyCount : '0'}</font>`"></q-label>
                <q-label id="titleLabel" :text="`注释行数  <font style='color:gray'>${currentFileInfo? currentFileInfo.annotationCount : '0'}</font>`"></q-label>
                <q-label id="titleLabel" :text="`净代码行数  <font style='color:gray'>${currentFileInfo? currentFileInfo.count - currentFileInfo.emptyCount - currentFileInfo.annotationCount : '0'}</font>`"></q-label>
                <q-label id="copyFileInfo" :text="`<a href='link' style='color:#3aad4f;'>复制文件信息</a>`" :visible="!!currentFileInfo" @linkActivated="on_CopyFileInfo_linkActivated"></q-label>
                <q-view horizontal-size-policy="Expanding"></q-view>
                <q-label id="footerLabel" :text="`<a href='link' style='color:#3aad4f;'>过滤此文件类型（需重新统计）</a>`" @linkActivated="addTypeToFilter"></q-label>
                <q-label id="footerLabel" :text="`<a href='link' style='color:#3aad4f;'>匹配此文件类型（需重新统计）</a>`" @linkActivated="addTypeToMatch"></q-label>
            </q-view>
            <q-list-view id="detailList" @itemDoubleClicked="on_detailList_itemDoubleClicked" @itemClicked="on_detailList_itemClicked" @currentItemChanged="on_detailList_currentItemChanged">
                <q-list-item layout="hbox" v-for="(target, index) in fileDetails" id="listItem">
                    <q-label id="fieldLabel" :text="`${target.filePath}`"></q-label>
                </q-list-item>
            </q-list-view>
        </q-view>
        <q-view layout="hbox" id="titleContainer">
            <q-label id="footerLabel" :text="`<a href='resetSort' style='color:#3aad4f;'>重置排序</a>`" @linkActivated="resetSort"></q-label>
            <q-label id="footerLabel" :text="`<a href='gotoSetting' style='color:#3aad4f;'>更多设置</a>`" @linkActivated="gotoSettings"></q-label>
            <q-label id="cleanReg" :text="`<a href='cleanReg' style='color:#3aad4f;'>清空正则过滤和匹配</a>`" @linkActivated="on_cleanReg_linkActivated"></q-label>
            <q-view horizontal-size-policy="Expanding"></q-view>
            <q-label id="footerLabel" :text="`<a href='onCopy' style='color:#3aad4f;'>复制详细信息</a>`" @linkActivated="onCopy($event)"></q-label>
            <q-label id="footerLabel" :text="`<a href='onCopyAndPaste' style='color:#3aad4f;'>复制详细信息并粘贴到编辑器</a>`" @linkActivated="onCopyAndPaste($events)"></q-label>
        </q-view>
    </q-view>
</template>

<script>
    export default {
        data() {
            return {
                displayList: [],
                all: {
                    count: 0,
                    fileCount: 0,
                    emptyCount: 0,
                    annotationCount: 0,
                    codeCount: 0,
                },
                sort: {
                    count: true,
                    fileCount: true,
                    emptyCount: true,
                    annotationCount: true,
                    codeCount: true,
                },
                fileDetails: [],
                lastExt:"",
                costTime: 0,
                currentFileInfo: undefined
            }
        },
        created() {
            this.displayList = [...this.washedInfos.values()].map(info=>{
                return {
                    ...info,
                    codeCount: info.count - info.emptyCount - info.annotationCount
                }
            });
            this.all.count = [...this.washedInfos.values()].map(info => info.count).reduce((p, c) => {
                return p + c;
            }, 0);
            this.all.fileCount = [...this.washedInfos.values()].map(info => info.fileCount).reduce((p, c) => {
                return p + c;
            }, 0);
            this.all.emptyCount = [...this.washedInfos.values()].map(info => info.emptyCount).reduce((p, c) => {
                return p + c;
            }, 0);
            this.all.annotationCount = [...this.washedInfos.values()].map(info => info.annotationCount).reduce((p,
                c) => {
                return p + c;
            }, 0);
            this.all.codeCount = this.all.count - this.all.emptyCount - this.all.annotationCount;
            this.costTime = (Date.now() - this.startTime) / 1000;
        },
        // mounted() {
        // },
        methods: {
            linkActivated(_, field) {
                let o = this.sort[field];
                this.sort[field] = !o;

                this.displayList.sort((a, b) => {
                    return o ? b[field] - a[field] : a[field] - b[field];
                })
                this.updateUi();
            },
            resetSort() {
                this.displayList = [...this.washedInfos.values()].map(info=>{
                    return {
                        ...info,
                        codeCount: info.count - info.emptyCount - info.annotationCount
                    }
                });
                this.updateUi();
            },
            onCopy() {
                let title = `统计：${this.fileName}\n\n|文件类型\t|文件数\t|行数\t|空行行数\t|注释行数\t|净代码行数\t|\n|:-\t\t|:-\t\t|:-\t\t|:-\t\t|:-\t\t|:-\t\t|\n`;
                let content = this.displayList.map(info => `|${info.ext}\t|${info.fileCount}\t|${info.count}\t|${info.emptyCount}\t|${info.annotationCount}\t|${info.codeCount}\t\t|`).join("\n");
                let end = `\n|总计：\t|${this.all.fileCount}\t|${this.all.count}\t|${this.all.emptyCount}\t|${this.all.annotationCount}\t|${this.all.codeCount}\t\t|`;
                return this.dialogCallbackObject.copyToClipBoard(title + content + end);
            },
            onCopyAndPaste(){
                this.onCopy().then(async(text) => {
                    this.dialogCallbackObject.openFileEditor({
                        content: text,
                        language: 'markdown'
                    });
                });
            },
            on_countList_itemDoubleClicked(el) {
                let info = this.displayList[el.target.currentRow];
                this.currentFileInfo = undefined;

                if (this.fileDetails.length && this.lastExt == info.ext) {
                    this.fileDetails = [];
                    this.updateUi();
                    return;
                }

                this.fileDetails = [];
                if(info.files.length > 5000){
                    this.dialogCallbackObject.showQuestion("文件数过多,超过5000个,可能会导致对话框卡死，是否继续？").then((res) => {
                        if(res){
                            this.fileDetails.push(...info.files)
                            this.lastExt = info.ext;
                            this.updateUi();
                        }
                    });
                    return;
                }

                this.fileDetails.push(...info.files)
                this.lastExt = info.ext;
                this.updateUi();
            },
            on_countList_currentItemChanged(el){
                console.log("currentItemChanged:", el.target.currentRow);
                if (!this.fileDetails.length) {
                    return;
                }

                this.on_countList_itemDoubleClicked(el);
            },
            on_detailList_itemDoubleClicked(el) {
                let info = this.fileDetails[el.target.currentRow];
                // console.log(info);
                if (info.filePath) {
                    this.dialogCallbackObject.openFileEditor(info.filePath);
                }
            },
            on_detailList_itemClicked(el) {
                let info = this.fileDetails[el.target.currentRow];
                console.log("click info:", info);
                this.currentFileInfo = info;
                this.updateUi();
            },
            on_detailList_currentItemChanged(el){
                let info = this.fileDetails[el.target.currentRow];
                if(this.currentFileInfo == info){
                    return;
                }
                // console.log("click info:", info);
                // console.log("update");
                this.currentFileInfo = info;
                this.updateUi();
            },
            gotoSettings(){
                this.dialogCallbackObject.gotoSetting();
            },
            addTypeToFilter(){
                this.dialogCallbackObject.addToFilter(this.lastExt);
            },
            addTypeToMatch(){
                // console.log(this.addToMatch);
                this.dialogCallbackObject.addToMatch(this.lastExt);
            },
            on_CopyFileInfo_linkActivated(el) {
                if(!this.currentFileInfo){
                    return;
                }

                let title = `统计：${this.currentFileInfo.filePath}\n\n|行数\t|空行行数\t|注释行数\t|净代码行数\t|\n|:-\t\t|:-\t\t|:-\t\t|:-\t\t|\n`;
                let content = this.currentFileInfo.count ? `|${this.currentFileInfo.count}\t|${this.currentFileInfo.emptyCount}\t|${this.currentFileInfo.annotationCount}\t|${this.currentFileInfo.count - this.currentFileInfo.emptyCount - this.currentFileInfo.annotationCount}\t\t|` : "";
                return this.dialogCallbackObject.copyToClipBoard(title + content);
            },
            on_cleanReg_linkActivated() {
                this.dialogCallbackObject.cleanFilterAndMatch();
            }
        }
    }
</script>

<style>
    #titleLabel {
        padding: 0;
        margin: 0;
    }

    #countLabel {
        color: gray;
    }

    /*
    #footerLabel {
        color: #3aad4f;
    }
    */
    QListView {
        background: transparent;
        border: 1px solid #3aad4f;
    }

    QListView::item {
        height: 22px;
    }

    QListView::item QLabel {
        color: gray;
        font-size: 14px;
    }

    QListView::item:selected {
        background-color: #85ce93;
        color: #FFFFFF;
    }
</style>